<template>
  <div class="login">
  <div class="auth-container">
    <div class="auth-header">
      <h1>授权确认</h1>
      <p>请确认是否授予应用访问您的账户信息</p>
    </div>

    <div class="auth-body">
      <div class="info-section">
        <div class="info-title">您的账户</div>
        <div class="user-info">

          <div class="avatar" v-if="userinfo.avatar==null">{{userinfo.nickName2}}</div>
          <div class="avatar2" v-if="userinfo.avatar">
            <img v-bind:src="userinfo.avatar2" alt="应用图标">
          </div>

          <div class="info-details">
            <h3>{{userinfo.nickName}}</h3>
            <p>{{'登录账户:'+userinfo.userName+' 登录IP:'+userinfo.loginIp}}</p>
          </div>
        </div>
      </div>

      <div class="info-section">
        <div class="info-title">请求授权的应用</div>
        <div class="app-info">
          <div class="app-logo">
            <img src="" alt="应用图标">
          </div>
          <div class="info-details">
            <h3>{{ssoAppInfo.appName}}</h3>
            <p>需要访问您的基本信息和组织权限</p>
          </div>
        </div>
      </div>

      <div class="auth-actions">
        <el-button class="btn btn-cancel" @click.native.prevent="btncancel">取消</el-button>
        <el-button class="btn btn-authorize" :loading="loading" @click.native.prevent="handleLogin">
          <span v-if="!loading">确认授权</span>
          <span v-else>授 权 中...</span>
        </el-button>
      </div>

      <div class="security-note">
        安全提示：仅授权您信任的应用。IndSvr不会以任何理由要求您提供密码。
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import Cookies from "js-cookie"
import { encrypt, decrypt } from '@/utils/jsencrypt'
import {getSsoAppInfo, postAuth} from "@/api/system/IndsvrSso";
import {getUserProfile} from "@/api/system/user";
import store from "@/store";
import {Message} from "element-ui";

export default {
  name: "Login",
  data() {
    return {
      title: process.env.VUE_APP_TITLE,
      ssoAppInfo: {},
      userinfo: {},
      client_id: undefined,
      redirect_uri: undefined,
      state: undefined,
      loading:false,
      autoOK:undefined,
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect_uri = route.query && route.query.redirect_uri
        this.client_id = route.query && route.query.client_id
        this.state = route.query && route.query.state
        this.autoOK = route.query && route.query.autoOK
      },
      immediate: true
    }
  },
  created() {

    // 是否自动确认登录
    if (this.autoOK) {
      this.handleLogin()
    }

    this.SsoAppInfo()
    this.UserInfo()
  },
  methods: {
    UserInfo(){
      getUserProfile().then(res => {
        res.data.avatar2=process.env.VUE_APP_BASE_API+res.data.avatar;
        res.data.nickName2= res.data.nickName.charAt(0)
        this.userinfo=res.data;
      }).catch(err => {
        this.loading=false;
      })
    },
    SsoAppInfo() {
      getSsoAppInfo(this.client_id).then(res => {
        this.ssoAppInfo=res.data;
      })
    },
    handleLogin() {
      this.loading = true

      if (!this.client_id) {
        this.$modal.msgError("缺少client_id参数，无法确定目标系统");
        this.loading = false
        return;
      }

      if (!this.redirect_uri) {
        this.$modal.msgError("缺少redirect_uri参数，无法回掉目标系统");
        this.loading = false
        return;
      }


      postAuth({
        appId:this.client_id,
        state:this.state,
        redirect:this.redirect_uri
      }).then(res => {
        this.loading = false
        location.href=res.data.redirect;
      })

      //
      // if (this.ssoAppInfo.loginType === 0) {//模拟登录
      // }else if (this.ssoAppInfo.loginType === 1) {//代填
      // }else if (this.ssoAppInfo.loginType === 2) {//oauth2
      // }else {
      //   this.loading = false
      //   this.$modal.msgError("未知授权类型");
      // }

    },
    btncancel(){
      location.href="/";
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../../assets/images/login-background.jpg");
  background-size: cover;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.auth-container {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

.auth-header {
  background-color: #0052cc;
  color: white;
  padding: 20px;
  text-align: center;
}

.auth-header h1 {
  font-size: 22px;
  margin-bottom: 5px;
}

.auth-header p {
  font-size: 14px;
  opacity: 0.9;
}

.auth-body {
  padding: 30px;
}

.info-section {
  margin-bottom: 25px;
}

.info-title {
  font-size: 14px;
  color: #6b7785;
  margin-bottom: 10px;
}

.user-info, .app-info {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  background-color: #f9fafb;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #0052cc;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin-right: 15px;
}

.avatar2 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}
.avatar2 img {
  max-width: 32px;
  max-height: 32px;
}


.app-logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}

.app-logo img {
  max-width: 32px;
  max-height: 32px;
}

.info-details h3 {
  font-size: 16px;
  color: #172b4d;
  margin-bottom: 3px;
}

.info-details p {
  font-size: 14px;
  color: #6b7785;
}

.auth-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.btn {
  padding: 12px 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  flex: 1;
}

.btn-cancel {
  background-color: #f5f7fa;
  color: #42526e;
}

.btn-cancel:hover {
  background-color: #ebecf0;
}

.btn-authorize {
  background-color: #0052cc;
  color: white;
}

.btn-authorize:hover {
  background-color: #0047b3;
}

.security-note {
  margin-top: 20px;
  font-size: 13px;
  color: #6b7785;
  text-align: center;
  padding: 15px;
  background-color: #f9fafb;
  border-radius: 8px;
}
</style>
